<template>
<div class="m-content">
  <h3>欢迎来到hzx的博客</h3>
  <div class="block"><el-avatar :size="50" :src="user.avatar"></el-avatar></div>
  <div>{{user.username}}</div>
  <div>
    <span><el-link href="#" target="_blank"><router-link to="/blogs">主页</router-link></el-link></span>
    <el-divider direction="vertical"></el-divider>
    <span><el-link type="success" href="#"><router-link to="/blog/add">发表博客</router-link></el-link></span>
    <span v-show="!hasLogined">
      <el-divider direction="vertical"></el-divider>
      <span><el-link type="primary" href="#" target="_self"><router-link to="/login">登录</router-link></el-link></span>
    </span>
    <span v-show="hasLogined">
      <el-divider direction="vertical"></el-divider>
      <span><el-link type="danger" @click="logout">退出</el-link></span>
    </span>
  </div>
  <div class="m-drawer">
    <el-button @click="drawer = true" type="primary"  style="margin-left: 16px;padding: 8px 8px">
      导航
    </el-button>
    <el-drawer
        title="作者简介"
        :visible.sync="drawer"
        direction="ltr"
        :before-close="handleClose"
        size="50%">
      <div class="m-desc">
        <h2 style="color: #f8d800">黄志祥</h2>
        <p>我是一名正在学习Java的大一学生，正在努力成为一名优秀的软件工程师，我相信，通过我的努力，自己的梦想一定会实现的。我的座右铭是：山重水复疑无路，柳暗花明又一村。</p>
      </div>
      <el-divider></el-divider>
      <div>
        <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose1"
            >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>学习</span>
            </template>
            <el-menu-item-group>
              <template slot="title">博客</template>
              <el-menu-item index="1-1" style="padding-left: 1px"><router-link to="/blogs">查看</router-link></el-menu-item>
              <el-menu-item index="1-2" style="padding-left: 1px"><router-link to="/blog/add">发表博客</router-link></el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="github">
              <el-menu-item index="1-3" style="padding-left: 1px"><a href="https://www.github.com">进入github</a></el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>娱乐</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="2-1" style="padding-left: 1px"><router-link to="/music">悦听音乐</router-link></el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item index="2-2" style="padding-left: 1px"><router-link to="/jokes">笑话连连看</router-link></el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item index="2-3" style="padding-left: 1px"><router-link to="/forecast">天气预报</router-link></el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item index="2-4" style="padding-left: 1px"><router-link to="/musicPro">MusicPro</router-link></el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item index="3" disabled>
            <i class="el-icon-document"></i>
            <span slot="title">敬请期待</span>
          </el-menu-item>
        </el-menu>
      </div>

    </el-drawer>
  </div>
</div>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {
      user: {
        username: '请先登录',
        avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
      },
      hasLogined: false,
      drawer: false,
    }
  },
  methods: {
    logout(){
      this.$axios.get("/logout", {
        headers: {
          "Authorization": localStorage.getItem("token"),
        }
      }).then(res=>{
        this.$store.commit("REMOVE_INFO");
        this.$router.push("/login");
      })
    },
    handleClose(done) {
      if(confirm("确认关闭？")) {
        done();
      }
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose1(key, keyPath) {
      console.log(key, keyPath);
    }
  },
  created() {
    if (this.$store.getters.getUser.username) {
      this.user.username = this.$store.getters.getUser.username;
      this.user.avatar = this.$store.getters.getUser.avatar;
      this.hasLogined = true;
    }
  }
}
</script>

<style scoped>
.m-content{
  max-width: 60em;
  margin: 0 auto;
  text-align: center;
}
.m-drawer{
  margin: 0 auto;
  text-align: center;
}

.m-desc{
  border: 1px orange solid;
  border-radius: 30px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

</style>